<!-- 
Canvas画布
    1、html结构：canvas标签
        <canvas></canvas>
    2、js代码：获取canvas标签对象（画布对象），并根据该对象得到上下文（2D或3D上下文对象、渲染对象、绘图对象）
        const 画布对象 = document.querySelector(xxx);
        const 上下文对象 = 画布对象.getContext("2d");
    上下文对象类似绘图工具箱，而箱子里的各种工具类似各种图形对象
    这些图形（线、圆、矩形...）就是在上下文中绘制出来的

注意一点：
    画布宽高用css设置时，绘制的图形存在拉伸问题
    正确设置方式如下：
        canvas标签对象.width = xxx;
        canvas标签对象.height = xxx;
        或者：<canvas width="xxx" height="xxx"></canvas>
    错误设置方式如下：
        canvas标签对象.style.width = xxx;
        canvas标签对象.style.height = xxx;
        或者：<canvas style="width: 650px; height: 650px"></canvas>

参考：
    3d上下文的获取是使用webgl或webgl2参数，请参考mdn官网
        https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext
    参考html5手册
        https://www.runoob.com/tags/ref-canvas.html
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            canvas {
                display: block;
                margin: 25px auto;
                border: 1px solid #aaa;
            }
        </style>
        <script>
            addEventListener("load", function () {
                // 1、画布对象
                let canvas = document.getElementById("canvas");
                canvas.width = 800;
                canvas.height = 650;
                // 2、2D绘图
                let context = canvas.getContext("2d");
                console.log(context); // CanvasRenderingContext2D
                // 3、线条
                context.moveTo(100, 100);
                context.lineTo(700, 600);
                context.lineWidth = 10;
                context.strokeStyle = "red";
                context.stroke();
            });
        </script>
    </head>
    <body>
        <!-- 画布对象的html结构 -->
        <canvas id="canvas"> 当前浏览器不支持Canvas，请更换浏览器后再试！ </canvas>
    </body>
</html>
